<template>
    <!-- 任务列表主体容器 -->
    <div class="main">
        <!-- 任务列表，使用无序列表展示 -->
        <ul class="todo-list">
            <!--
                循环渲染任务列表：
                - v-for="item in list"：遍历父组件传递的list数组
                - :key="item.id"：使用任务唯一id作为key，确保列表渲染稳定性
                - :class="{ completed: item.done }"：动态添加completed类名（当任务完成时）
            -->
            <li v-for="item in list" :key="item.id" :class="{ completed: item.done }">
                <div class="view">
                    <!--
                        复选框：
                        - v-model="item.done"：双向绑定任务的完成状态
                        - 勾选/取消勾选会直接修改item.done（响应式更新）
                    -->
                    <input class="toggle" type="checkbox" v-model="item.done"/>

                    <!-- 任务名称标签，显示当前任务的名称 -->
                    <label>{{ item.name }}</label>

                    <!--
                        删除按钮：
                        - 点击时调用delTodo函数，传递当前任务的id
                        - 仅在鼠标悬停时显示（通过CSS控制）
                    -->
                    <button class="destroy" @click="delTodo(item.id)"></button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
// 定义组件接收的props：父组件传递的任务列表list
// list是一个数组，包含多个任务对象（每个对象有id、name、done属性）
const props = defineProps(['list'])

// 定义自定义事件发射器，声明当前组件可以触发delTodo事件
// 用于向父组件传递要删除的任务id
const emit = defineEmits(['delTodo'])

// 处理删除任务的函数
// 参数id：要删除的任务的唯一标识
const delTodo = id => {
    // 简单校验：如果id存在（避免无效调用），则触发delTodo事件
    id && emit('delTodo', id)
}
</script>

<style scoped>
/* 主体容器样式 */
.main {
    position: relative;
    z-index: 2; /* 控制层级，确保在其他元素上方显示 */
    border-top: 1px solid #e6e6e6; /* 顶部边框，分隔头部和主体 */
}

/* 任务列表样式 */
.todo-list {
    margin: 0;
    padding: 0;
    list-style: none; /* 去除默认列表样式（圆点） */
}

/* 单个任务项样式 */
.todo-list li {
    position: relative; /* 相对定位，为内部绝对定位元素提供参考 */
    font-size: 16px; /* 任务文字大小 */
    border-bottom: 1px solid #ededed; /* 底部边框，分隔不同任务 */
    padding: 0; /* 清除默认内边距 */
}

/* 最后一个任务项去除底部边框 */
.todo-list li:last-child {
    border-bottom: none;
}

/* 复选框样式 */
.todo-list li .toggle {
    text-align: center;
    width: 30px; /* 复选框宽度 */
    height: auto; /* 高度自适应 */
    position: absolute; /* 绝对定位，固定在左侧 */
    top: 0;
    bottom: 0;
    margin: auto 0; /* 垂直居中 */
    border: none; /* 去除默认边框 */
    opacity: 0; /* 初始隐藏原生复选框 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
}

/* 复选框对应的标签样式（未勾选状态） */
.todo-list li .toggle+label {
    /* 未勾选时显示圆形边框图标 */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
    background-repeat: no-repeat; /* 背景图不重复 */
    background-position: center left; /* 背景图位置：左侧居中 */
}

/* 复选框对应的标签样式（已勾选状态） */
.todo-list li .toggle:checked+label {
    /* 勾选时显示带对勾的图标 */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
}

/* 任务名称标签样式 */
.todo-list li label {
    word-break: break-all; /* 长文本自动换行 */
    padding: 15px 15px 15px 60px; /* 内边距，左侧留空容纳复选框图标 */
    display: block; /* 块级元素，占满一行 */
    line-height: 1.2; /* 行高，优化文字显示 */
    transition: color 0.4s; /* 颜色变化过渡动画 */
    font-weight: 400; /* 字体粗细 */
    color: #484848; /* 文字颜色 */
}

/* 已完成任务的标签样式 */
.todo-list li.completed label {
    color: #949494; /* 文字变灰 */
    text-decoration: line-through; /* 文字添加删除线 */
}

/* 删除按钮样式 */
.todo-list li .destroy {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位，固定在右侧 */
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px; /* 宽度 */
    height: 40px; /* 高度 */
    margin: auto 0; /* 垂直居中 */
    font-size: 30px; /* 文字大小（×符号） */
    transition: color 0.2s ease-out; /* 颜色变化过渡动画 */
    border: none; /* 去除边框 */
    background-color: #fff; /* 背景色与列表项一致 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
}

/* 删除按钮 hover 和 focus 状态 */
.todo-list li .destroy:hover,
.todo-list li .destroy:focus {
    color: #c18585; /* 颜色变红，提示删除操作 */
    outline: none; /* 去除焦点边框 */
}

/* 删除按钮内容（×符号） */
.todo-list li .destroy:after {
    content: "×"; /* 使用伪元素添加×符号 */
    display: block;
    height: 100%;
    line-height: 1.1; /* 垂直居中×符号 */
}

/* 鼠标悬停在任务项上时显示删除按钮 */
.todo-list li:hover .destroy {
    display: block;
}
</style>